
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
	<link rel='stylesheet' id='casper-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Noto+Serif%3A400%2C700%2C400italic%7COpen+Sans%3A700%2C400&amp;ver=4.0.1' type='text/css' media='all' />
	
	<title>Photopea API</title>
	
			
	</head>

	<body>
<div id="page">
	<div id="header"> 
		<a href="../index.html" class="title">Photopea API</a> 
		<!--<p>Web-based image editor.</p>-->
		<a href="https://blog.photopea.com">Blog</a> |
		<a href="../learn/index.html">Learn</a> |
		<a href="../tuts/index.html">Tutorials</a> |
		<a class="curr" href="index.html">API</a> |
		<a href="https://www.facebook.com/photopea">Facebook</a> |
		<a href="https://www.twitter.com/photopeacom">Twitter</a> 
	</div>
	
	<div id="main" style="max-width:960px;">
		<div id="sidebar" style="width:20%;">
			<!--<h3>Topics</h3>-->
			<ul>
						<li class="lvl0"><a href="index.html">API Spec</a></li>
			<li class="lvl1 active"><a href="environment.html">Environment</a></li>
			<li class="lvl1"><a href="live.html">Live Messaging</a></li>
			<li class="lvl1"><a href="plugins.html">Plugins</a></li>
			<li class="lvl0"><a href="playground.html">Playground</a></li>
			<li class="lvl0"><a href="demo.html">Demo</a></li>
			<li class="lvl0"><a href="accounts.html">Accounts</a></li>
			</ul>
		</div>
		<div id="content" style="width:80%;">

			<div class="post">
				<h1>Environment</h1>
			
			<p>The look of the editor can be customized by the <code>environment</code> property of the JSON.</p>
				
<pre>{
	...
	"environment" : {          
		"theme"     : 2,         "lang"     : "es",    
		"vmode"     : 0,         "intro"    : true,
		"eparams"   : { "guides" :true, "grid" : true, "gsize": 8,   
		                                "paths": true, "pgrid": true },
		
		"localsave" : false,     "autosave" : 120,    
		"showtools" : [0,5,9],   "menus"    : [ [1,1,0,1], 1, 0, 1, [0] ],
		"showpanels": [0, [1]],
		
		"phrases"   : [ [1,0], "Open Design", [1,2], "Save Design" ],
		
		"topt"  : {  "t0": ...,  "t1": ...,  ... },
		"tmnu"  : {  "t0": ...,  "t1": ...,  ... },
		"icons" : {  "tools/crop": "https://www.me.com/img/crop.png",  ... },
		"plugins":[ ... ]
	}
}</pre>
			<p>Each parameter is optional. They have the following meaning:</p>
			<ul>
				<!--
				<li><code>fcolor</code> - foreground color</li>
				<li><code>bcolor</code> - background color</li>
				<li><code>rulers</code> - rulers enabled</li>-->
				<li><code>theme</code> - theme (0, 1, 2, ...)</li>
				<li><code>lang</code> - language</li>
				<li><code>vmode</code> - view mode. 0: regular, 1: panels are collapsed, 2: hide all panels</li>
				<li><code>intro</code> - when no documents are open, show introduction panel (with buttons etc.)</li>
				<li><code>eparams</code> - extras: enable or disable guides, grid, paths, pixel grid ...</li>
				<!--<li><code>showbranding</code> - show / hide Log In, Social media links etc.</li>-->
				<li><code>localsave</code> - enable / disable "Save as PSD", "Save for Web" and "Publish Online"</li>
				<li><code>autosave</code> - with a value X, Photopea will execute "File - Save" each X seconds</li>
				<li><code>showtools</code> - show only following tools (see tool IDs below) </li>
				<li><code>menus</code> - specify the structure of File, Edit, Image ... menus with <b>0/1 flags</b>. 
					Each element of an array is either 0: hide the item, 1: show the item with a standard content, 
					or an array of flags for sub-items (works recursively).	If your array is shorter than required, zeros will be added to the end.
					See the current menu structure of Photopea to find the right values.
					E.g. [1,1] as the first element means, that the "File" menu will be shown with "New" and "Open" items only.</li>
				<li><code>showpanels</code> - allows you to hide elements on the right side.
					There are two <b>columns</b>, which contain <b>panel blocks</b>, which contain one or more <b>panels</b>.
					Each element of an array is either 0: hide the column, 1: show the column with all standard items, 
					or an array of indices of panel blocks, that should be displayed.</li>
				<li><code>phrases</code> - allows you to replace any phrase inside Photopea with your own. 
					The aray has the form <code>[ ID1, W1, ID2, W2, ... ]</code>, where IDx is the ID of some phrase and Wx is a new phrase, that should be used instead.<br />
					Some useful IDs: [1,2]: Save (File menu), [2,0]: Step Forward, [2,1]: Step Backward. 
					To discover IDs of other phrases, get familiar with <a href="https://github.com/photopea/OpenWord">OpenWord table structure</a> and find 
					your phrase in <a href="../code/LNG2.js">a current phrase database</a>, or just write us an email to support@photopea.com.</li>
				<li><code>topt</code> - tool options. Lets you change the settings of each tool.
				Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
				<li><code>tmnu</code> - tool menu. Lets you specify the structure of the top menu for each tool.
				Keys are "tXY", where XY is the tool ID. Each tool has its own format (see below).</li>
				<li><code>icons</code> - custom icons. Each icon has an icon ID (key) and the image URL (value). 
					You can find icon IDs <a href="../code/PIMG.js">here</a>. 
					E.g. the Crop Tool has an ID "tools/crop". The background of the introduction panel as an ID "intro".</li>
				<li><code>plugins</code> - described <a href="plugins.html">here</a></li>
			</ul>
			
			<h2>Tool options and menus</h2>
			
			<h3>Move Tool</h3>
			<p>Options: <code>[1,0,null]</code>. Three values mean Auto-Select, Transformation controls and Distances. 
			1 means enabled, 0: disabled, null: not specified.</p>
			<p>Menu: <code>[1,1,1,1,1,1]</code>. Six flags to show / hide six items: Auto-Select, Transformation controls, Distances, 
			Quick Save (Get PNG...), Vertical Align, Horizontal Align.</p>
			
			<h2>Tool IDs</h2>
			
			<ul style="column-count:3;  list-style-type: none;">
			<li>0: Move Tool</li><li>1: Rectangle Select</li><li>2: Ellipse Select</li><li>5: Lasso Select</li><li>6: Polygonal Lasso Select</li><li>7: Magnetic Lasso Select</li><li>8: Quick Selection</li><li>9: Magic Wand</li><li>10: Crop Tool</li><li>14: Eyedropper</li><li>16: Ruler</li><li>18: Spot Healing Brush Tool</li><li>19: Healing Brush Tool</li><li>20: Patch Tool</li><li>23: Brush Tool</li><li>24: Pencil Tool</li><li>27: Clone Tool</li><li>31: Eraser Tool</li><li>34: Gradient Tool</li><li>35: Paint Bucket Tool</li><li>36: Blur Tool</li><li>37: Sharpen Tool</li><li>38: Smudge Tool</li><li>39: Dodge Tool</li><li>40: Burn Tool</li><li>41: Sponge Tool</li><li>47: Type Tool</li><li>42: Pen</li><li>43: Free Pen</li><li>51: Path Select</li><li>52: Direct Select</li><li>54: Rectangle</li><li>55: Ellipse</li><li>57: Line</li><li>56: Parametric Shape</li><li>58: Custom Shape</li><li>59: Hand Tool</li><li>61: Zoom Tool</li>
			
			</ul>			</div>
		</div>
	</div>
		
	<div id="disqus_thread"></div>
	<script>

	/**
	*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
	*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
	/*
	var disqus_config = function () {
	this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
	this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
	};
	*/
	(function() { // DON'T EDIT BELOW THIS LINE
	var d = document, s = d.createElement('script');
	s.src = '//photopeablog.disqus.com/embed.js';
	s.setAttribute('data-timestamp', +new Date());
	(d.head || d.body).appendChild(s);
	})();
	</script>
	 
</div>
	
</html>
